import React from "react"

// 创建高阶组件
function withMouse(WrappedComponent) {
    // 该组件提供复用的状态逻辑
    class Mouse extends React.Component {
        state = {
            x:0,
            y:0
        }
        handelMouseMove = (e) => {
            this.setState({
                x : e.clientX,
                y : e.clientY
            })
        }

        componentDidMount() {
            window.addEventListener('mousemove', this.handelMouseMove)
        }
        componentWillUnmount() {
            window.removeEventListener('mousemove',this.handelMouseMove)
        }
        render() {
            return <WrappedComponent {...this.state}{...this.props}></WrappedComponent>
        }
    }
    return Mouse
}
const Cat = cat => {
    return <p
        style={{
            position:'absolute',
            top:cat.y,
            left:cat.x
        }}>猫</p>
}
const Position = props =>(
    <p> 鼠标位置: {props.x} {props.y}</p>
)
const MousePosition = withMouse(Position)
const CatPosition = withMouse(Cat)
class GaojieZujian extends React.Component {
    render() {
        return (
            <div>
                <h1>高阶组件</h1>
                <MousePosition></MousePosition>
                <CatPosition></CatPosition>
            </div>
        );
    }
}
export default GaojieZujian
